<template>
    <div>
        <mark>我是pages页面的test1.vue页面使用布局页面text.vue进行布局</mark>
        <p>在pages文件夹下新建一个文件会自动生成路由页面的</p>
        <img :src="imgCaptcha" @click="rester"/>
        <div  class="drap" ref="drap">
        <input type="file" @change="handelUpLoad">
        </div>
        <mark>进度条：{{progress+'%'}}</mark>
        <p>--------------------------------</p>
        <button @click="upFile">上传文件</button>
    </div>
</template>
<script>
import axios from 'axios';
const FILE_SIZE = 0.5*1024*1024;//todo 0.5M
export default {
  layout: 'text',
  data(){
      return{
          imgCaptcha:'',
          file:null,
          progress:0
      }
  },
  mounted(){
      this.rester();
      this.eventDrap();
  },
  methods:{
      eventDrap(){
          const drap = this.$refs.drap;
        //   todo 监听拖拽进入事件
          drap.addEventListener('dragover',e=>{
              drap.style.borderColor = 'red';
              e.preventDefault();
          })
        //   监听拖拽离开事件
          drap.addEventListener('dragleave',e=>{
              drap.style.borderColor = '#ccc';
              e.preventDefault();
          })
          // todo 拖拽到框中的文件进行读取
          drap.addEventListener('drop',e=>{
              const file = e.dataTransfer.files[0];
              drap.style.borderColor = '#ccc';
              e.preventDefault();
              this.file = file;
              console.log(this.file);
          })
      },
    //   读取文件的头信息并进行格式的转化，转为unicloud码，在转16进制
        isReadImg(blob){
            return new Promise((resolve)=>{
                const reader = new FileReader();
                 reader.onload = function () {
                 const ret =  reader.result.split('')
                    .map(v=>v.charCodeAt())
                    .map(v=>v.toString(16).toUpperCase())
                    .join(' ')
                    resolve(ret);
                }
                reader.readAsBinaryString(blob);
            })
        },
        // 判断图片是不是GIF的
        async isGif(file){
            // 图片的类型通过头信息进行判断47 49 46 38 39(37) 61 
            const res = await this.isReadImg(file.slice(0,6));
            console.log(res);
            const isGifImg = res=='47 49 46 38 39 61'|| res=='47 49 46 38 37 61';
            return isGifImg
        },
        // 判断图片是不是png的
        async isPng(file){
            // 图片的类型通过头信息进行判断前8位后面是图片的宽高信息
            // 89 50 4E 47 0D 0A 1A 0A 不知道怎么回事，读取出的文件头信息没有0，有的话不通过
            const res = await this.isReadImg(file.slice(0,8));
            console.log(res);
            const isPngImg = res=='89 50 4E 47 D A 1A A';
            return isPngImg
        },
        // 判断图片是不是jpg的
        async isJpg(file){
            // 图片的类型通过头信息进行判断头两位和尾部后两位
            const len = file.size;
            const start = await this.isReadImg(file.slice(0,2));
            const end = await this.isReadImg(file.slice(-2,len));
            console.log(start,end);
            const isJpgImg =(start=='FF D8')&&(end==='FF D9');
            return isJpgImg
        },
      async isImg(file){
          return await this.isGif(file) || await this.isPng(file) || await this.isJpg(file);
      },
    //   todo 将文件超过0.5M的进行切片 FILE_SIZE全局变量，图片的大小为0.5M
      createChunks(file,size=FILE_SIZE){
          let chunks = [];
          let cur = 0;
          while(cur<file.size){
              chunks.push({index:cur,file:file.slice(cur,cur+size)});
              cur+=size;
          }
          return chunks;
      },
      async upFile(){

          const chunks = this.createChunks(this.file);
          console.log(chunks);
          return;

          if(!await this.isImg(this.file)){
              console.log('验证错误');
              return 
          }else{
              console.log('验证通过')
          }
        const formDate = new FormData();
         console.log(this.file);

         formDate.append('name','file');
         formDate.append('file',this.file);
         console.log(formDate.get('file'));
         const res = await axios.post('/api/upload',formDate,{
             onUploadProgress: progressEvent=>{//这个是自带的进度条事件
                 console.log(progressEvent);
                 this.progress = (Number(progressEvent.loaded/progressEvent.total)*100).toFixed(2)
             }
         });
         
         console.log(res);
      },
      handelUpLoad(e){//上传文件，获取文件的内容
          console.log(e);
          const [file] = e.target.files;
          if(!file) return;
          this.file = file;
      },
      rester(){
          this.imgCaptcha = "/api/svg-img?_t="+new Date().getTime();
      }
  }
}
</script>
<style>
.drap{
    width:100%;
    height:200px;
    text-align:center;
    line-height:200px;
    border:4px dashed #ccc;
}
</style>